<script setup>
import { ref, reactive } from 'vue'
import { useRouter, RouterView } from 'vue-router'
const activeIndex = ref('1')
const router = useRouter()

const menuItem = ref([
  { name: '首页', id: 1, url: '/main/home' },
  { name: '证书查询', id: 2, url: 'http://zscx.osta.org.cn/' },
  { name: '活动回顾', id: 3, url: '/main/activityreview' },
  { name: '公告', id: 4, url: '/main/announcement?articleType=NOTICE' },
  { name: '新闻资讯', id: 5, url: '/main/NewsList?articleType=INFORMATION' },
  { name: '会员单位', id: 6, url: '/main/vipunit' },
  { name: '关于协会', id: 7, url: "/main/aboutassociation" },
  { name: '联系我们', id: 8, url: '/main/Contactus' },
])
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)

}
const routerClick = (item) => {
  if(item.url.indexOf('http') != -1){
    window.location.href = item.url;
  }else{
    router.push({ path: item.url })
  }
}
function goRouterByUrl(url){
  router.push({ path: url })
}
</script>



<template>
  <div>
    <header>
      <el-row>
        <el-col :span="6">
          <div class="header-left">
            <div class="image">
              <img src="@/assets/img/icon.png" alt="">
            </div>
            <div>
              <span class="zh">淄博市技能人才开发协会</span><br>
              <span class="eng">Zibo Skilled Personnel Development Association</span>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <el-menu  :default-active="router.currentRoute.value.path" class="menu-item" mode="horizontal"
            @select="handleSelect">
            <template v-for="(item, index) in menuItem" :key="item.id">
              <el-menu-item :index="item.id" @click="routerClick(item)">{{ item.name }}</el-menu-item>

            </template>

          </el-menu>
        </el-col>
        <el-col :span="6">
          <div class="tel-box">
            <div class="tel">
              <div class="tel-img">
                <img src="@/assets/img/tel.png" alt="">
              </div>
              <div class="separate"></div>
              <div class="tel-number">17853339199</div>
            </div>
          </div>

        </el-col>
      </el-row>
    </header>
    <main>
      <RouterView />

    </main>
    <footer>
      <div class="bottom">
        <div class="bottom-content">
          <div>
            <ul>
              <li >快速入口</li>
              <li class="click-li" @click="goRouterByUrl('/main/activityreview')">活动回顾</li>
              <li class="click-li" @click="goRouterByUrl('/main/announcement')">通知公告</li>
              <li class="click-li" @click="goRouterByUrl('/main/vipunit')">会员单位</li>
            </ul>
          </div>
          <div>
            <ul>
              <li >关于我们</li>
              <li class="click-li" @click="goRouterByUrl('/main/aboutassociation')">协会介绍</li>
              <li class="click-li" @click="goRouterByUrl('/main/Contactus')">联系我们</li>
            </ul>
          </div>
          <div>
            <ul>
              <li>服务与支持</li>
              <li>服务热线：0533-2729818</li>
              <li>合作热线：17853339199</li>
              <li>工作时间：9:00 - 18:00（工作日）</li>
            </ul>
          </div>
          <div>
            <ul>
              <li>客服热线</li>
              <li class="phone">17853339199</li>
            </ul>
          </div>
        </div>
        <ul class="bq">
          <li>Copyright © 2023zbjnrc.All Rights Reserved</li>
          <li>淄博市技能人才开发协会 版权所有鲁ICP备2023001104号</li>
        </ul>
      </div>
    </footer>

  </div>
</template>

<style lang="less" scoped>
.header-left {
  display: flex;
  align-items: center;
  justify-content: end;
  height: 100%;

  .zh {
    width: 273px;
    font-size: 24px;
    font-family: 楷体;
    font-weight: 400;
    color: #1A1A1A;
    line-height: 13px;
    letter-spacing: 1.4px;
  }

  .eng {
    font-size: 9px;
    font-family: FZLTXHJW;
    font-weight: normal;
    color: #787878;
    line-height: 13px;
  }

  .image {
    width: 40px;
    height: 40px;
    margin-right: 10px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.tel-box {
  display: flex;
  align-items: center;
  height: 100%;

  .tel {
    width: 210px;
    height: 40px;
    // background: #1891FF;
    // opacity: 0.08;
    background: rgba(24, 145, 255, 0.08);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;

    .separate {
      width: 1px;
      height: 16px;
      background: #D3DFEB;
      margin: 0 10px;
    }

    .tel-img {
      width: 18px;
      height: 16px;

      // background-color: red;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .tel-number {
      font-size: 20px;
      font-family: FZZYJW;
      font-weight: normal;
      font-style: italic;
      color: #1891FF;
      line-height: 13px;
    }
  }
}

footer {
  .bottom {
    margin-top: 80px;
    height: 340px;
    background: #192D3F;

    .bottom-content{
      justify-content: space-around;
      align-items: flex-start;
      //padding: 0 516px;
      display: flex;
      width: 1200px;
      margin: 0 auto;
      border-bottom: 1px solid #ccc;
      padding-bottom: 20px;
      box-sizing: border-box;

    }
    div ul li:nth-child(1) {
      display: inline-block;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 13px;
      margin-top: 80px;
      margin-bottom: 25px;
    }

    div ul li {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #A3AEB9;
      line-height: 30px;

    }
    .click-li {
      cursor:pointer;
    }

    .phone {
      font-size: 24px;
      font-family: Microsoft YaHei;
      line-height: 36px;

      font-family: FZZYJW;
      font-weight: 600;
      font-style: italic;
      color: #1891FF;
    }
  }
}

.menu-item {

  height: 100px;

  .el-menu-item:hover {
    background: none !important;
    color: #000;
  }

  .el-menu-item.is-active {
    background: none !important;

  }

}

.el-menu--horizontal {
  border-bottom: none;
  display: flex;
  --el-menu-level: 0;
  align-items: center;
  justify-content: center;
}

.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: none;
  color: none;
}

.el-menu--horizontal>.el-menu-item {
  border-bottom: none;
}

.el-menu-item.is-active {
  background-color: #fff !important;
}
.bq{
  color: #ccc;
  font-size: 14px;
  text-align: center;

}
.bq>li{
  margin-top: 20px;
}
</style>
